<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="index.css">
    <link href="font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
                        
</head>
<body>
    <div id="nav">
        <div class="container">
            <div id="logo"><span>学生信息管理系统</span></div>
            <ul id="nav-menu">
                <li><a href="">首页</a></li>
                <li><a href="" class="active">学生管理</a></li>
            </ul> 
        </div>
    </div>

    <div id="header">
        <div class="container">
            <h2>学生查询及管理</h2>
        </div>
    </div>

    <div id="button-group">
        <div class="container">
            <button>添加学生</button>
            <button><span class="fa fa-search"></span>搜索</button>
        </div>
    </div>

    <div id="student-table">
        <div class="container">
            <!--table:表示表格-->
            <table>
                <!--thead：表头-->
                <thead>
                    <!--tr: 表示行-->
                    <tr>
                        <!--th：一般表头中的单元格使用th标签-->
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>手机号</th>
                        <th>电子邮箱</th>
                        <th>创建时间</th>
                        <th>修改</th>
                        <th>删除</th>
                    </tr>
                </thead>

                <!--tbody: 表格主体-->
                <tbody>
                    <tr>
                        <!--td:表格主体中的单元格一般用td（table-data）表示-->
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>18329992224</td>
                        <td>74782828@qq.com</td>
                        <td>2017-04-05 17:37</td>
                        <td><span class="fa fa-edit"></span></td>
                        <td><span class="fa fa-trash-o"></span></td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>18329992224</td>
                        <td>74782828@qq.com</td>
                        <td>2017-04-05 17:37</td>
                        <td><span class="fa fa-edit"></span></td>
                        <td><span class="fa fa-trash-o"></span></td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>18329992224</td>
                        <td>74782828@qq.com</td>
                        <td>2017-04-05 17:37</td>
                        <td><span class="fa fa-edit"></span></td>
                        <td><span class="fa fa-trash-o"></span></td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>18329992224</td>
                        <td>74782828@qq.com</td>
                        <td>2017-04-05 17:37</td>
                        <td><span class="fa fa-edit"></span></td>
                        <td><span class="fa fa-trash-o"></span></td>
                    </tr>
                    <tr>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>18329992224</td>
                        <td>74782828@qq.com</td>
                        <td>2017-04-05 17:37</td>
                        <td><span class="fa fa-edit"></span></td>
                        <td><span class="fa fa-trash-o"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>